let pre = document.querySelector('.pre')
let next = document.querySelector('.next')
let context = document.querySelectorAll('.content')

function tonext() { 
    let show = document.querySelector('.show')
    if (show.nextElementSibling) {
        show.nextElementSibling.classList.add('show')
    } else { 
        context[0].classList.add('show')
    }
    show.classList.remove('show')
}

function topre() { 
    let show = document.querySelector('.show')
    if (show.previousElementSibling) {
        show.previousElementSibling.classList.add('show')
    } else { 
        context[context.length-1].classList.add('show')
    }
    show.classList.remove('show')
}
next.addEventListener('click', () => { 
    stop()
    tonext()
    star()
})
let timer
function star() { 
    timer = setInterval(() => { 
        tonext()
    },3000)
}
function stop() { 
    clearInterval(timer)
}
star()



pre.addEventListener('click', () => { 
    stop()
    topre()
    star()
})